<template>
    <el-dialog class="loanadd" :visible.sync="value" :before-close="close" title="添加请款单" width="700px">
        <el-form label-width="120px" ref="formRef" :model="formData" :rules="rules">
            <el-form-item prop="title" label="请款单标题">
                <el-input v-model="formData.title" placeholder="请输入请款单标题" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item prop="username" label="请款人姓名">
                <el-input v-model="formData.username" placeholder="请输入请款人姓名" style="width:150px"></el-input>
            </el-form-item>
            <el-form-item prop="project_id" label="项目">
                <el-select v-model="formData.project_id" placeholder="请选择项目" style="width:20 0px">
                    <el-option v-for="(item,index) in project_list" :key="`project_item_${index}`" :label="item.project_name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="payout_money" label="请款金额">
                <el-input-number v-model="formData.payout_money" :controls="false" placeholder="请输入请款金额"></el-input-number>
            </el-form-item>
            <el-form-item label="请款文件附件">
                <elUploadFile v-model="formData.payout_attachment" :limit="1" :multiple="false"></elUploadFile>
            </el-form-item>
            <el-form-item prop="desc" label="请款事由">
                <el-input v-model="formData.desc" type="textarea" :rows="5"  placeholder="请输入请款事由"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="submit" type="primary">提交</el-button>
            <el-button @click="close">关闭</el-button>
        </div>
    </el-dialog>
</template>
<script>
import elUploadFile from '@/components/el-upload-file.vue';
import _ from 'lodash-es'
export default{
    data(){
        return{
            formData:{
                title:'',
                username:'',
                project_id:'',
                payout_money:undefined,
                payout_attachment:[],
                desc:''
            },
            rules:{
                title:[ {required:true,message:'请输入请款单标题',trigger:'blur'} ],
                username:[ {required:true,message:'请输入请款人姓名',trigger:'blur'} ],
                project_id:[ {required:true,message:'请选择项目',trigger:'blur'} ],
                payout_money:[ {required:true,message:'请输入请款金额',trigger:'blur'} ],
                desc:[ {required:true,message:'请款事由',trigger:'blur'} ]
            },
            project_list:[]
        }
    },
    components:{elUploadFile},
    props:{
        value:Boolean,
        editRow:Object
    },
    watch:{
        value(val){
            if(val && !this.project_list.length){
                this.getProjectList()
            }
        },
        editRow(val){
            if(val){
                this.$emit('input',true)
                Object.assign(this.formData,val)
                this.formData.payout_attachment = [{
                    name:'附件',
                    url:val.payout_attachment
                }]
            }
        }
    },
    methods:{
        async getProjectList(){
            try{
                let res = await this.$post({
                    url:'/admin/project.Project/index',
                })
                this.project_list = res.list
            }catch(err){
                this.$message.error(err)
            }
        },
        submit:_.throttle(function(){
            this.$refs.formRef.validate(async(valid)=>{
                if(valid){
                    let formData = JSON.parse(JSON.stringify(this.formData))
                    if(formData.payout_attachment[0]){
                        formData.payout_attachment = formData.payout_attachment[0].url
                    }
                    try{
                        this.$loading()
                        await this.$post({
                            url:!this.editRow?'/admin/finance.ProjectPayout/add':'/admin/finance.ProjectPayout/edit',
                            data:formData,
                            loading:true,
                            successTip:true
                        })
                        this.$loading().close()
                        this.$emit('update')
                        this.close()
                    }catch(err){
                        this.$loading().close()
                        this.$message.error(err)
                    }
                }
            })
        },1000),
        close(){
            this.$refs.formRef.resetFields()
            this.$emit('update:editRow',null)
            this.$emit('input',false)
        }
    }
}
</script>
<style>
    .loanadd .el-input-number.is-without-controls .el-input__inner{
        text-align: left;
    }
</style>